<template>
  <div class="edit-panel">
    <!-- 当没有选中组件时显示的默认面板 -->
    <div v-if="!selectedComponent" class="default-panel">
      <div class="empty-edit-state">
        <i class="el-icon-edit"></i>
        <p>请选择要编辑的组件</p>
        <p>点击左侧组件进行添加</p>
      </div>
    </div>

    <!-- 当选中组件时显示的编辑面板 -->
    <div v-else>
      <!-- 通用组件设置 -->
      <div class="panel-section">
        <div class="section-title">
          模块设置
          <button class="edit-close-btn" @click="handleCloseEdit">×</button>
        </div>
        <div class="form-item">
          <label>模块名称：</label>
          <input
            v-model="selectedComponent.label"
            type="text"
            class="form-input"
            placeholder="请输入模块名称"
          />
        </div>
        <div class="form-item" v-if="selectedComponent.showTitle">
          <label>标题显示：</label>
          <input type="checkbox" v-model="selectedComponent.showTitle" />
        </div>
      </div>

      <!-- 文本组件设置 -->
      <div v-if="selectedComponent.type === 'text'" class="panel-section">
        <div class="section-title">文本内容</div>
        <div class="form-item">
          <textarea
            v-model="selectedComponent.content"
            class="form-textarea"
            placeholder="请输入文本内容"
          ></textarea>
        </div>
        <div class="form-item">
          <label>字体：</label>
          <select v-model="selectedComponent.fontFamily" class="form-select">
            <option value="微软雅黑">微软雅黑</option>
            <option value="宋体">宋体</option>
            <option value="黑体">黑体</option>
          </select>
        </div>
        <div class="form-item">
          <label>字号：</label>
          <select v-model="selectedComponent.fontSize" class="form-select">
            <option value="16px">16px</option>
            <option value="14px">14px</option>
            <option value="18px">18px</option>
          </select>
        </div>
        <div class="form-item">
          <label>颜色：</label>
          <div class="color-picker">
            <input
              type="text"
              class="color-input"
              v-model="selectedComponent.color"
            />
            <div
              class="color-preview"
              :style="{ backgroundColor: selectedComponent.color }"
            ></div>
          </div>
        </div>
        <div class="form-item">
          <label>样式：</label>
          <div class="style-options">
            <label
              ><input type="checkbox" v-model="selectedComponent.bold" />
              加粗</label
            >
            <label
              ><input type="checkbox" v-model="selectedComponent.italic" />
              斜体</label
            >
            <label
              ><input type="checkbox" v-model="selectedComponent.underline" />
              下划线</label
            >
          </div>
        </div>
        <!-- 添加背景颜色和边框设置 -->
        <div class="form-item">
          <label>背景颜色：</label>
          <div class="color-picker">
            <input
              type="text"
              class="color-input"
              v-model="selectedComponent.bgColor"
            />
            <div
              class="color-preview"
              :style="{
                backgroundColor: selectedComponent.bgColor || '#f9f9f9',
              }"
            ></div>
          </div>
        </div>

        <div class="form-item">
          <label>边框样式：</label>
          <select v-model="selectedComponent.borderStyle" class="form-select">
            <option value="none">无</option>
            <option value="solid">实线</option>
            <option value="dashed">虚线</option>
            <option value="dotted">点线</option>
          </select>
        </div>
        <div v-if="selectedComponent.borderStyle !== 'none'" class="form-item">
          <label>边框颜色：</label>
          <div class="color-picker">
            <input
              type="text"
              class="color-input"
              v-model="selectedComponent.borderColor"
            />
            <div
              class="color-preview"
              :style="{ backgroundColor: selectedComponent.borderColor }"
            ></div>
          </div>
        </div>

        <div class="form-item">
          <label>圆角：</label>
          <input
            type="number"
            class="form-input"
            v-model="selectedComponent.borderRadius"
            placeholder="圆角值"
            min="0"
          />
        </div>

        <div class="form-item">
          <label>对齐方式：</label>
          <div class="align-options">
            <button
              class="align-btn"
              :class="{ active: selectedComponent.align === 'left' }"
              @click="selectedComponent.align = 'left'"
            >
              <i class="el-icon-align-left"></i>
            </button>
            <button
              class="align-btn"
              :class="{ active: selectedComponent.align === 'center' }"
              @click="selectedComponent.align = 'center'"
            >
              <i class="el-icon-align-center"></i>
            </button>
            <button
              class="align-btn"
              :class="{ active: selectedComponent.align === 'right' }"
              @click="selectedComponent.align = 'right'"
            >
              <i class="el-icon-align-right"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 图片组件设置 -->
      <div v-else-if="selectedComponent.type === 'image'" class="panel-section">
        <div class="section-title">图片设置</div>
        <div class="form-item">
          <label>上传图片：</label>
          <div class="image-upload-area">
            <div v-if="!selectedComponent.imageUrl" class="upload-placeholder">
              <i class="el-icon-upload"></i>
              <span>点击上传</span>
            </div>
            <div v-else class="image-preview-small">
              <img :src="selectedComponent.imageUrl" alt="预览图片" />
              <button class="remove-image-btn" @click="handleRemoveImage">
                ×
              </button>
            </div>
            <input
              type="file"
              class="file-input"
              @change="handleImageUpload"
              accept="image/*"
            />
          </div>
        </div>
        <div class="form-item">
          <label>尺寸：</label>
          <div class="size-inputs">
            <input
              type="number"
              class="size-input"
              v-model="selectedComponent.width"
              placeholder="宽"
            />
            <span>×</span>
            <input
              type="number"
              class="size-input"
              v-model="selectedComponent.height"
              placeholder="高"
            />
          </div>
        </div>
        <div class="form-item">
          <label>对齐方式：</label>
          <div class="align-options">
            <button
              class="align-btn"
              :class="{ active: selectedComponent.align === 'left' }"
              @click="setAlign('left')"
            >
              <i class="el-icon-align-left"></i>
            </button>
            <button
              class="align-btn"
              :class="{ active: selectedComponent.align === 'center' }"
              @click="setAlign('center')"
            >
              <i class="el-icon-align-center"></i>
            </button>
            <button
              class="align-btn"
              :class="{ active: selectedComponent.align === 'right' }"
              @click="setAlign('right')"
            >
              <i class="el-icon-align-right"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 按钮组件设置 -->
      <div
        v-else-if="selectedComponent.type === 'button'"
        class="panel-section"
      >
        <div class="section-title">按钮设置</div>
        <div class="form-item">
          <label>按钮文字：</label>
          <input
            type="text"
            class="form-input"
            v-model="selectedComponent.content"
            placeholder="按钮文字"
          />
        </div>
        <div class="form-item">
          <label>按钮样式：</label>
          <select v-model="selectedComponent.style" class="form-select">
            <option value="primary">主色</option>
            <option value="success">成功</option>
            <option value="warning">警告</option>
            <option value="danger">危险</option>
          </select>
        </div>
        <div class="form-item">
          <label>按钮尺寸：</label>
          <select v-model="selectedComponent.size" class="form-select">
            <option value="small">小</option>
            <option value="medium">中</option>
            <option value="large">大</option>
          </select>
        </div>
        <div class="form-item">
          <label>链接地址：</label>
          <input
            type="text"
            class="form-input"
            v-model="selectedComponent.link"
            placeholder="点击后跳转的链接"
          />
        </div>
        <div class="form-item">
          <label>打开方式：</label>
          <select v-model="selectedComponent.target" class="form-select">
            <option value="_self">当前窗口</option>
            <option value="_blank">新窗口</option>
          </select>
        </div>
      </div>

      <!-- 列表多图组件设置 -->
      <div v-else-if="selectedComponent.type === 'list'" class="panel-section">
        <div class="section-title">列表多图设置</div>
        <div class="form-item">
          <label>列表项数：</label>
          <input
            type="number"
            class="form-input"
            v-model.number="selectedComponent.itemCount"
            min="1"
            max="10"
          />
        </div>
        <div class="form-item">
          <label>项目标题：</label>
          <input
            type="text"
            class="form-input"
            v-model="selectedComponent.itemTitle"
            placeholder="项目标题"
          />
        </div>
        <div class="form-item">
          <label>项目描述：</label>
          <textarea
            class="form-textarea"
            v-model="selectedComponent.itemDesc"
            placeholder="项目描述内容"
          ></textarea>
        </div>
      </div>

      <!-- 轮播多图组件设置 -->
      <div
        v-else-if="selectedComponent.type === 'carousel'"
        class="panel-section"
      >
        <div class="section-title">轮播多图设置</div>
        <div class="form-item">
          <label>轮播项数：</label>
          <input
            type="number"
            class="form-input"
            v-model.number="selectedComponent.carouselItemCount"
            min="1"
            max="10"
          />
        </div>
        <div class="form-item">
          <label>轮播标题：</label>
          <input
            type="text"
            class="form-input"
            v-model="selectedComponent.carouselTitle"
            placeholder="轮播标题"
          />
        </div>
        <div class="form-item">
          <label>自动播放：</label>
          <input type="checkbox" v-model="selectedComponent.autoPlay" />
        </div>
        <div v-if="selectedComponent.autoPlay" class="form-item">
          <label>播放间隔(秒)：</label>
          <input
            type="number"
            class="form-input"
            v-model.number="selectedComponent.playInterval"
            min="1"
            max="10"
          />
        </div>
      </div>

      <!-- 魔方导航组件设置 -->
      <div v-else-if="selectedComponent.type === 'grid'" class="panel-section">
        <div class="section-title">魔方导航设置</div>
        <div class="form-item">
          <label>导航项数：</label>
          <select v-model="selectedComponent.gridCount" class="form-select">
            <option value="4">4个</option>
            <option value="6">6个</option>
            <option value="8">8个</option>
            <option value="9">9个</option>
          </select>
        </div>
        <div class="form-item">
          <label>导航标签：</label>
          <button class="action-btn secondary" @click="updateGridLabels">
            编辑标签
          </button>
        </div>
      </div>

      <!-- 图文展示组件设置 -->
      <div
        v-else-if="selectedComponent.type === '图文展示'"
        class="panel-section"
      >
        <div class="section-title">图文展示设置</div>
        <div class="form-item">
          <label>特色图片：</label>
          <div class="image-upload-area">
            <div
              v-if="!selectedComponent.featureImage"
              class="upload-placeholder"
            >
              <i class="el-icon-upload"></i>
              <span>点击上传</span>
            </div>
            <div v-else class="image-preview-small">
              <img :src="selectedComponent.featureImage" alt="特色图片" />
              <button
                class="remove-image-btn"
                @click="handleRemoveFeatureImage"
              >
                ×
              </button>
            </div>
            <input
              type="file"
              class="file-input"
              @change="handleFeatureImageUpload"
              accept="image/*"
            />
          </div>
        </div>
        <div class="form-item">
          <label>特色标题：</label>
          <input
            type="text"
            class="form-input"
            v-model="selectedComponent.featureTitle"
            placeholder="特色标题"
          />
        </div>
        <div class="form-item">
          <label>特色描述：</label>
          <textarea
            class="form-textarea"
            v-model="selectedComponent.featureDesc"
            placeholder="详细描述内容"
          ></textarea>
        </div>
      </div>

      <!-- 横向标签组件设置 -->
      <div v-else-if="selectedComponent.type === 'tags'" class="panel-section">
        <div class="section-title">横向标签设置</div>
        <div class="form-item">
          <label>标签内容：</label>
          <textarea
            class="form-textarea"
            v-model="tagsText"
            placeholder="标签之间用逗号分隔"
          ></textarea>
        </div>
        <div class="form-item">
          <label>标签样式：</label>
          <select v-model="selectedComponent.tagStyle" class="form-select">
            <option value="primary">主色</option>
            <option value="default">默认</option>
            <option value="success">成功</option>
          </select>
        </div>
      </div>

      <!-- 搜索组件设置 -->
      <div
        v-else-if="selectedComponent.type === 'search'"
        class="panel-section"
      >
        <div class="section-title">搜索组件设置</div>
        <div class="form-item">
          <label>搜索框占位符：</label>
          <input
            type="text"
            class="form-input"
            v-model="selectedComponent.searchPlaceholder"
            placeholder="搜索内容..."
          />
        </div>
        <div class="form-item">
          <label>按钮文字：</label>
          <input
            type="text"
            class="form-input"
            v-model="selectedComponent.searchButtonText"
            placeholder="搜索"
          />
        </div>
      </div>

      <!-- 公告组件设置 -->
      <div
        v-else-if="selectedComponent.type === 'notice'"
        class="panel-section"
      >
        <div class="section-title">公告组件设置</div>
        <div class="form-item">
          <label>公告内容：</label>
          <textarea
            class="form-textarea"
            v-model="selectedComponent.noticeContent"
            placeholder="公告内容"
          ></textarea>
        </div>
        <div class="form-item">
          <label>公告类型：</label>
          <select v-model="selectedComponent.noticeType" class="form-select">
            <option value="warning">警告</option>
            <option value="info">信息</option>
            <option value="success">成功</option>
          </select>
        </div>
      </div>

      <!-- 通用样式设置 -->
      <div class="panel-section">
        <div class="section-title">样式设置</div>
        <div class="form-item">
          <label>背景颜色：</label>
          <div class="color-picker">
            <input
              type="text"
              class="color-input"
              v-model="selectedComponent.bgColor"
              placeholder="#FFFFFF"
            />
            <div
              class="color-preview"
              :style="{ backgroundColor: selectedComponent.bgColor }"
            ></div>
          </div>
        </div>
        <div class="form-item">
          <label>边框样式：</label>
          <select v-model="selectedComponent.borderStyle" class="form-select">
            <option value="none">无</option>
            <option value="solid">实线</option>
            <option value="dashed">虚线</option>
            <option value="dotted">点线</option>
          </select>
        </div>
        <div class="form-item" v-if="selectedComponent.borderStyle !== 'none'">
          <label>边框颜色：</label>
          <div class="color-picker">
            <input
              type="text"
              class="color-input"
              v-model="selectedComponent.borderColor"
            />
            <div
              class="color-preview"
              :style="{ backgroundColor: selectedComponent.borderColor }"
            ></div>
          </div>
        </div>
        <div class="form-item">
          <label>圆角：</label>
          <input
            type="number"
            class="form-input"
            v-model="selectedComponent.borderRadius"
            placeholder="0"
          />
        </div>
        <div class="form-item">
          <label>内边距：</label>
          <div class="padding-inputs">
            <input
              type="number"
              class="padding-input"
              v-model="selectedComponent.paddingTop"
              placeholder="上"
            />
            <input
              type="number"
              class="padding-input"
              v-model="selectedComponent.paddingRight"
              placeholder="右"
            />
            <input
              type="number"
              class="padding-input"
              v-model="selectedComponent.paddingBottom"
              placeholder="下"
            />
            <input
              type="number"
              class="padding-input"
              v-model="selectedComponent.paddingLeft"
              placeholder="左"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 页面全局设置 -->
    <div class="panel-section">
      <div class="section-title">企业信息</div>
      <div class="form-item">
        <label>企业名称：</label>
        <input
          v-model="formData.companyName"
          type="text"
          class="form-input"
          placeholder="智联科创园"
        />
      </div>
    </div>

    <div class="panel-section">
      <div class="section-title">主题设置</div>
      <div class="form-item">
        <label>主题颜色：</label>
        <div class="color-options">
          <div
            v-for="color in themeColors"
            :key="color"
            class="color-option"
            :style="{ backgroundColor: color }"
            :class="{ active: selectedColor === color }"
            @click="handleSelectThemeColor(color)"
          ></div>
          <div class="color-option custom-color" @click="openColorPicker"></div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="panel-actions">
      <button class="action-btn primary">购买定制版</button>
      <button class="action-btn secondary" @click="handleSavePage">保存</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditPanel",
  props: {
    selectedComponent: {
      type: Object,
      default: null,
    },
    formData: {
      type: Object,
      default: () => ({
        companyName: "智联科创园",
      }),
    },
    themeColors: {
      type: Array,
      default: () => ["#1890ff", "#fa8c16", "#52c41a", "#f5222d"],
    },
    selectedColor: {
      type: String,
      default: "#1890ff",
    },
  },
  computed: {
    // 计算属性用于处理标签文本和数组的转换
    tagsText: {
      get() {
        return this.selectedComponent?.tags?.join(", ") || "";
      },
      set(value) {
        if (this.selectedComponent) {
          this.selectedComponent.tags = value
            .split(",")
            .map((tag) => tag.trim())
            .filter((tag) => tag);
          this.$emit("component-update");
        }
      },
    },
  },
  methods: {
    // 处理关闭编辑
    handleCloseEdit() {
      this.$emit("component-select", null);
    },

    // 处理图片上传
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        // 在实际项目中，这里应该上传图片到服务器
        // 这里使用URL.createObjectURL仅作为演示
        const imageUrl = URL.createObjectURL(file);
        this.selectedComponent.imageUrl = imageUrl;
        this.$emit("component-update");

        // 清空input，以便可以重复选择同一文件
        event.target.value = "";
      }
    },

    // 处理移除图片
    handleRemoveImage() {
      if (this.selectedComponent && this.selectedComponent.imageUrl) {
        URL.revokeObjectURL(this.selectedComponent.imageUrl);
        this.selectedComponent.imageUrl = "";
        this.$emit("component-update");
      }
    },

    // 处理特色图片上传
    handleFeatureImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const imageUrl = URL.createObjectURL(file);
        this.selectedComponent.featureImage = imageUrl;
        this.$emit("component-update");
        event.target.value = "";
      }
    },

    // 处理移除特色图片
    handleRemoveFeatureImage() {
      if (this.selectedComponent && this.selectedComponent.featureImage) {
        URL.revokeObjectURL(this.selectedComponent.featureImage);
        this.selectedComponent.featureImage = "";
        this.$emit("component-update");
      }
    },

    // 更新网格标签
    updateGridLabels() {
      const labels = prompt(
        "请输入导航标签，用逗号分隔:",
        this.selectedComponent.gridLabels?.join(", ") || ""
      );
      if (labels) {
        this.selectedComponent.gridLabels = labels
          .split(",")
          .map((label) => label.trim())
          .filter((label) => label);
        this.$emit("component-update");
      }
    },

    // 设置对齐方式
    setAlign(align) {
      if (this.selectedComponent) {
        this.selectedComponent.align = align;
        this.$emit("component-update");
      }
    },

    // 选择主题颜色
    handleSelectThemeColor(color) {
      this.$emit("select-theme-color", color);
    },

    // 打开颜色选择器
    openColorPicker() {
      // 实际项目中可以集成颜色选择器组件
      alert("打开颜色选择器");
    },

    // 保存页面
    handleSavePage() {
      this.$emit("save-page");
    },
  },
  watch: {
    // 监听选中组件变化，触发更新
    selectedComponent: {
      deep: true,
      handler() {
        this.$emit("component-update");
      },
    },
  },
};
</script>

<style scoped>
.edit-panel {
  width: 350px;
  background-color: #fff;
  border-left: 1px solid #e8e8e8;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.panel-section {
  margin-bottom: 25px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.edit-close-btn:hover {
  background-color: #f5f5f5;
  color: #666;
}

.form-item {
  margin-bottom: 15px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-textarea {
  height: 80px;
  resize: vertical;
}

.color-options {
  display: flex;
  gap: 10px;
}

.color-option {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s;
  box-shadow: 0 0 0 1px #e8e8e8;
}

.color-option:hover {
  border-color: #999;
  transform: scale(1.1);
}

.color-option.active {
  border-color: #1890ff;
  box-shadow: 0 0 0 1px #1890ff;
}

.custom-color {
  background: linear-gradient(
      45deg,
      #ddd 25%,
      transparent 25%,
      transparent 75%,
      #ddd 75%,
      #ddd
    ),
    linear-gradient(
      45deg,
      #ddd 25%,
      transparent 25%,
      transparent 75%,
      #ddd 75%,
      #ddd
    );
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

.color-picker {
  display: flex;
  gap: 10px;
  align-items: center;
}

.color-input {
  flex: 1;
}

.color-preview {
  width: 40px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  cursor: pointer;
  transition: border-color 0.3s;
}

.color-preview:hover {
  border-color: #1890ff;
}

.radio-options {
  display: flex;
  gap: 20px;
}

.radio-options label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  cursor: pointer;
}

.radio-options input[type="radio"] {
  margin-right: 5px;
}

.style-options {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.style-options label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  cursor: pointer;
}

.style-options input[type="checkbox"] {
  margin-right: 5px;
}

/* 对齐方式选项 */
.align-options {
  display: flex;
  gap: 5px;
}

.align-btn {
  padding: 6px 10px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.align-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.align-btn.active {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

/* 图片上传区域 */
.image-upload-area {
  position: relative;
}

.upload-placeholder {
  width: 100%;
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  cursor: pointer;
  background-color: #fafafa;
  transition: all 0.3s;
}

.upload-placeholder:hover {
  border-color: #1890ff;
  color: #1890ff;
  background-color: #f0f7ff;
}

.upload-placeholder i {
  font-size: 24px;
  margin-bottom: 5px;
}

.file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.image-preview-small {
  width: 100%;
  height: 120px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.image-preview-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-image-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.3s;
}

.remove-image-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* 尺寸输入 */
.size-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.size-input {
  width: 60px;
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  text-align: center;
}

/* 边距输入 */
.padding-inputs {
  display: flex;
  gap: 5px;
}

.padding-input {
  flex: 1;
  padding: 6px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
}

/* 默认编辑面板 */
.default-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-edit-state {
  text-align: center;
  color: #999;
}

.empty-edit-state i {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.empty-edit-state p {
  margin: 5px 0;
  font-size: 14px;
}

.panel-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.action-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn.primary {
  background-color: #1890ff;
  color: #fff;
  flex: 1;
}

.action-btn.primary:hover {
  background-color: #40a9ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.action-btn.secondary {
  background-color: #fff;
  color: #666;
  border: 1px solid #d9d9d9;
  flex: 1;
}

.action-btn.secondary:hover {
  border-color: #40a9ff;
  color: #40a9ff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .edit-panel {
    width: 300px;
  }
}

@media (max-width: 768px) {
  .edit-panel {
    width: 100%;
    height: auto;
    max-height: 300px;
  }
}
</style>
